<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>圆弧</title>
</head>

<body>
  <svg width="108px" height="60px">
    <path d="M 5 55 A 50 50 0 0 1 105 55" fill="#fff" stroke="#E6E6E6" stroke-width="4" />
    <path d="M 5 55 A 50 50 0 0 1 15 25" fill="#fff" stroke="#02CFD7" stroke-width="4" />
  </svg>
</body>
<script>
  // SVG半圆弧进度条数据绑定计算公式：（不同实现方式数据不同，请参考以下公式）
 
  // x = 45 - 40 * Math.cos(progerss / 100 * 180 * Math.PI / 180);
  // y = 45 - 40 * Math.sin(progerss / 100 * 180 * Math.PI / 180);
</script>

</html>